<admintpl file="header" />
<head>
    <meta charset="UTF-8">
    <title>标签列表</title>
    <style type="text/css">
        * {margin:0;padding: 0;}
        body{font-family: "Microsoft YaHei","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;color:#999;font-size: 18px}
        ul,li{list-style: none;padding: 0;margin:0;}
        .label_tab{padding-left: 40px;font-size: 16px;}
        .label_tab ul{border: 1px solid #999;margin-bottom: 20px;}
        .label_tab li {float: left;width: 70px;height: 20px;text-align: center;cursor: pointer;padding: 0 10px;margin-bottom: 10px;}
        .label_tab_groud {margin-bottom:18px;padding-top: 8px; padding-left: 20px;border: 1px solid #999;}
        .label_tab_groud .number span {display: inline-block; width: 50px;cursor: pointer;}
        .label_tab_groud .letter span{display: inline-block;width: 37px;margin:10px 0;cursor:pointer;text-align: center;}
        .label_tab .active {background-color: #f1c40f}
        .label_content {padding-left: 40px;line-height: 40px;margin-top: 50px;}
        .label_content p {width:136px;height: 40px;border:1px solid #c8161d;border-top: 2px solid #c8161d;text-align: center;cursor: pointer;}
        .label_content .label_list .label-a {
            display: inline-block;
            width: 80px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #999;
            text-align: center;
            margin-right: 54px;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .labe-type-tab {
            display: inline-block;
        }

        .label-check {
            position: relative;
            top: -15px;

        }

    </style>
</head>
<body>
<div class="wrap js-check-wrap">

    <input type="hidden" id="has_labels" value="{$has_labels}">

    <div style="width: 1100px;">
        <div class="label_tab" id="label_tab">
            <ul class="labe-type-tab">
                <li id="0">全部</li>
                <volist name="label_type_lists" id="vo">
                    <li id="{$vo.id}" class="{$vo['id'] == $label_type_id ? 'active ' : ''}">{$vo.name}</li>
                </volist>
            </ul>
            <div class="label_tab_groud">
                <div class="letter">
                    <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span>
                    <span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span>
                    <span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span>
                    <span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>*</span>
                </div>
            </div>
        </div>

        <div class="label_content">
            <div class="label_list">
                <volist name="label_lists" id="vo">
                        <span class="label-span">
                            <input class="label-check" type="checkbox" value="{$vo.id}" {$vo.checked}>
                            <span class="label-a">{$vo.name}</span>
                        </span>
                </volist>
            </div>
        </div>
    </div>


</div>
<script type="text/javascript" src="__PUBLIC__/js/common.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/layer/layer_1.js"></script>
<script type="text/javascript">

    var label_type_id   = "{$label_type_id}";
    var abbr             = "{$abbr}";

    (function(){
        // 初始化分类选择
        var tab_select = $('.labe-type-tab li.active').length;
        if (tab_select == 0) {
            $('.labe-type-tab li:first').addClass('active');
        }

        // 初始化字母选择
        $('.letter span').each(function () {
            var _abbr =  $(this).html();
            if (_abbr == abbr) {
                $(this).addClass('active');
            }
        })


        //tab 标签页的切换效果
        $('body').delegate('#label_tab ul li', 'click', function () {
            $(this).addClass("active").siblings().removeClass("active");
            var _label_type_id = $(this).attr('id');
            label_type_id = _label_type_id;
            search_label();
        });

        // 字母切效果
        $('body').delegate('.letter span', 'click', function () {
            $(this).addClass("active").siblings().removeClass("active");
            var _abbr = $(this).html();
            abbr = _abbr;
            search_label();
        });

        $('body').delegate('.label-check', 'change', function () {
            var old_has_labels  = $('#has_labels').val().split(',');
            var label_id        = $(this).val();
            var checked         = $(this).is(":checked");

            if (old_has_labels.indexOf(label_id) >= 0) {
                if (!checked) {
                    old_has_labels.splice(old_has_labels.indexOf(label_id), 1);
                }
            } else {
                if (checked) {
                    old_has_labels.push(label_id)
                }
            }
            old_has_labels = old_has_labels.length > 0 ? old_has_labels.sort().join(',') : '';
            $('#has_labels').val(old_has_labels);
        });

    })()

    function search_label() {
        var old_has_labels  = $('#has_labels').val();
        $.get("{:U('Label/AdminIndex/select_label')}" + "&has_labels=" + old_has_labels, {label_type_id : label_type_id, abbr : abbr}, function (data) {
            $('.label_list').empty();
            var html = "";
            $.each(data.data, function (index, item) {
                html += '<span class="label-span">';
                html += '<input class="label-check" type="checkbox" value="' + item.id + '" ' + item.checked  + '>';
                html += '<span class="label-a">' + item.name + "</span>"
                html += '</span>'
            })
            $('.label_list').append(html);
        })
    }

</script>
</body>
</html>